<template>
  <div class="header-nav">
    <div
        class="button small"
        @click="$router.back()"
    >
      <i class="el-icon-back"/>
    </div>
    <div
        class="button"
        @click="$emit('collapse-click')"
    >
      <i :class="icon"/>
    </div>

    <header-breadcrumb v-if="showBreadcrumb" />
    <div class="blank"/>

    <el-button
        type="text"
        @click="signOut"
    >
      注销
    </el-button>
  </div>
</template>

<script>
import HeaderBreadcrumb from '@/components/header/HeaderBreadcrumb'

export default {
    name: 'HeaderNav',
    components: { HeaderBreadcrumb },
    props: {
        collapseSide: {
            type: Boolean,
            default: true
        },
        showBreadcrumb: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        icon() {
            return this.collapseSide ? 'el-icon-s-unfold' : 'el-icon-s-fold'
        }
    },
    methods: {
        signOut() {
            this.$store.commit('clearToken')
            localStorage.removeItem('password')
            this.$router.push({name:'login'})
        }
    }
}
</script>

<style scoped>
.header-nav {
    flex-direction: row;
    display: flex;
    align-items: center;
    height: 100%;
}
.button {
    font-size: 2em;
    color: #8a8a8a;
    margin-right: 30px;
}
.button.small {
    font-size: 1.5em;
    margin-right: 15px;
}
.button:hover {
    color: #4888d6;
}
</style>